import { createApp } from 'vue'
// 仓库
import pinia from './stores'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import App from './App.vue'
// vue-router
import router from './router'
import './styles/index.scss'
import ElSvg from './components/SvgIcon/ElSvg'
// 路由守卫
import './permission'
// 引入仓库
import { useUserInfoStore } from './stores/userInfo'
// 引入全局组件Category
import Category from '@/components/Category/index.vue'
const app = createApp(App)
// 按钮权限 : 1.引入全局自定义指令
// 全局自定义指令的第一个参数是指令的名称,第二个参数:自定义指令钩子函数
app.directive('authority', {
  mounted(el, binding) {
    // 判断仓库里的服务器返回的用户按钮是否有对应的按钮权限
    if (!useUserInfoStore().buttonLists.includes(binding.value)) {
      // 拿到其父节点,从DOM树上将其移除,注意不要使用display,因为其安全性不高,懂技术的人能破解
      el.parentNode.removeChild(el)
    }
  }
})

//vue-echarts设置
import ECharts from 'vue-echarts'
import { use } from "echarts/core"

// import ECharts modules manually to reduce bundle size
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);
// 注册全局组件,记得创建完app之后再写!!!
app.component('Category', Category)
// 注册全局组件 ECharts
app.component('v-chart', ECharts)
// 引入mock,让接口可以正常使用
import './mock/mockServe'

ElSvg(app)
// 注册仓库/路由/element-plus
app.use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .mount('#app')
